html,
body {
  width: 100%;
  height: 100%;
}

html .content .btns-box,
body .content .btns-box {
  display: flex;
  flex-direction: row-reverse;
}

html .content .btns-box button,
body .content .btns-box button {
  width: 50px;
  margin-left: 10px;
}

html .footer,
body .footer {
  margin-bottom: 7px;
}

html .addTask,
body .addTask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

html .addTask .shade-bg,
body .addTask .shade-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

html .addTask .shade-content,
body .addTask .shade-content {
  position: absolute;
  width: 80%;
  height: 300px;
  background: #ffffff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

html .addTask .shade-content textarea,
body .addTask .shade-content textarea {
  color: #0894ec;
  width: 100%;
  height: 80%;
  resize: none;
}

html .addTask .shade-content button,
body .addTask .shade-content button {
  margin-right: 20px;
}

html .removeTask,
body .removeTask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

html .removeTask .shade-bg,
body .removeTask .shade-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

html .removeTask .shade-content,
body .removeTask .shade-content {
  position: absolute;
  width: 80%;
  height: 100px;
  background: #ffffff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

html .removeTask .shade-content p,
body .removeTask .shade-content p {
  color: #0894ec;
  margin-left: 20px;
}

html .removeTask .shade-content button,
body .removeTask .shade-content button {
  margin-right: 20px;
}
